<template>
  <div class="app-container">
    <div class="filter-container">
<!--      <el-input size="small" class="filter-item" v-model="listQuery.app_client_name" placeholder="客户名称" style="width: 220px;"-->
<!--                clearable/>-->
<!--      <el-input size="small" class="filter-item" v-model="listQuery.app_client_id" placeholder="客户ID" style="width: 220px;"-->
<!--                clearable/>-->
      结算账期:<el-date-picker
          size="small"
          class="filter-item"
          v-model="dateArr"
          type="monthrange"
          :default-time="['00:00:00', '23:59:59']"
          align="right"
          value-format="yyyy-MM"
          unlink-panels
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
      ></el-date-picker>
      <el-select v-model="listQuery.confirm_status" placeholder="确认状态" clearable style="width: 120px"
                 class="filter-item"
                 size="small">
        <el-option label="已确认" value="1"/>
        <el-option label="未确认" value="0"/>
      </el-select>
      <el-select v-model="listQuery.invoice_status" placeholder="开票状态" clearable style="width: 120px"
                 class="filter-item"
                 size="small">
        <el-option label="已开票" value="1"/>
        <el-option label="未开票" value="0"/>
      </el-select>
      <el-select v-model="listQuery.pay_status" placeholder="付款状态" clearable style="width: 120px"
                 class="filter-item"
                 size="small">
        <el-option label="已付款" value="1"/>
        <el-option label="未付款" value="0"/>
      </el-select>

      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter" size="small">搜索
      </el-button>
    </div>
    <el-table
        v-loading="listLoading"
        :data="list"
        :row-class-name="tableRowClassName"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
    >
      <el-table-column align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="结算账期">
        <template slot-scope="scope">
          {{ moment(scope.row.settlement_date).format('YYYY-MM') }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="结算对象名称">
        <template slot-scope="scope">
          {{ scope.row.app_client_name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="结算对象ID">
        <template slot-scope="scope">
          {{ scope.row.app_client_id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单数">
        <template slot-scope="scope">
          {{ scope.row.order_num }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="确认状态" min-width="110" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.confirm_status == 1" type="success">已确认</el-tag>
          <el-tag v-else type="warning">未确认</el-tag>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="支付状态" min-width="110" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.pay_status == 1" type="success">已付款</el-tag>
          <el-tag v-else-if="scope.row.pay_status == 2" type="success">部分付款</el-tag>
          <el-tag v-else type="warning">未付款</el-tag>
        </template>
      </el-table-column>
      <!--      <el-table-column class-name="status-col" label="查看凭证" min-width="110" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--         {{scope.row.pay_proofs}}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column class-name="status-col" label="发票状态" min-width="110" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.invoice_status == 1" type="success">已开票</el-tag>
          <el-tag v-else type="warning">未开票</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="账期应付金额">
        <template slot-scope="scope">
          {{ scope.row.total_actual_channel_money }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="补差" min-width="140">
        <template slot-scope="scope">
<!--          <div v-if="scope.row._editing">-->
<!--            <el-input-->
<!--                v-model="scope.row._make_up_diff_edit"-->
<!--                size="mini"-->
<!--                @blur="submitMakeUpDiff(scope.row)"-->
<!--                @keyup.enter.native="submitMakeUpDiff(scope.row)"-->
<!--                style="width: 80px"-->
<!--            />-->
<!--          </div>-->
<!--          <div-->
<!--              v-else-->
<!--              @click="enableEdit(scope.row)"-->
<!--              style="cursor: pointer; display: flex; align-items: center; justify-content: center;"-->
<!--          >-->
            <span>{{ scope.row.make_up_diff }}</span>
<!--            <i class="el-icon-edit" style="margin-left: 5px; color: #409EFF;" />-->
<!--          </div>-->
          <el-button size="mini" type="primary" icon="el-icon-download" v-if="scope.row.make_up_diff_proofs" @click="downloadDiff(scope.row)">
            下载补差明细
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="总计应付金额">
        <template slot-scope="scope">
          {{
            scope.row.total_money
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="已付款总额">
        <template slot-scope="scope">
          {{
            scope.row.paid_money
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="待付款总额">
        <template slot-scope="scope">
          {{
            scope.row.wait_paid_money
          }}
        </template>
      </el-table-column>
      <el-table-column label="账单日" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.created_at }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="到期对账日" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.confirm_expire_at }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="账期状态" min-width="110" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.account_period_status == 0" type="warning">未出账</el-tag>
          <el-tag v-else-if="scope.row.account_period_status == 1" type="success">已出账</el-tag>
          <el-tag v-else type="danger">已关账</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="到期付款日" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.pay_expire_at }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="延误付款日" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.pay_delayed_expire_at }}
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          min-width="320px"
      >
        <template slot-scope="scope">
          <div style="margin-top: 0px">
            <el-button size="mini" type="success" @click="geToOrderDetail(scope.row)">订单明细
            </el-button>

            <el-button
                v-if="scope.row.confirm_status ==0"
                size="mini" type="warning" @click="confirm(scope.row)">
              确认对账无误
            </el-button>
          </div>
          <div style="margin-top: 5px">
            <download-excel
                class="filter-item"
                :fields="json_fields"
                :fetch="() =>handleExport(scope.row)"
                type="xls"
                name="订单明细.xls"
                worksheet="订单明细"
            >

              <el-button  size="mini"  type="success"   :loading="exportLoadingMap[scope.row.id] === true">
                下载明细
              </el-button>
            </download-excel>
          </div>
          <div style="margin-top: 5px">
<!--            <el-button size="mini" type="warning" v-if="scope.row.invoice_status" @click="handleInvoice(scope.row)">查看发票凭证-->
<!--            </el-button>-->
            <el-button size="mini" type="primary"  v-if="scope.row.invoice_status" icon="el-icon-download" @click="downloadInvoice(scope.row)">
              下载发票
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="listQuery.limit"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog title="上传支付凭证" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form ref="form" :rules="rules" :model="form" label-position="left" label-width="120px"
               style="width: 400px; margin-left:50px;">
        <el-form-item label="支付凭证" prop="pay_proof">

          <upload-one
              v-model="form.pay_proof"
              :url="form.pay_proof"
              width="200px"
              height="200px"
          ></upload-one>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveData" :loading="btnLoading">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="发票凭证" :visible.sync="dialogFormVisible1" :close-on-click-modal="false">
      <el-form ref="form1" :rules="rules1" :model="form1" label-position="left" label-width="120px"
               style="width: 400px; margin-left:50px;">
        <el-form-item label="发票凭证" prop="invoice_proof">
          <el-image
              style="width: 100px; height: 100px"
              :src="form1.invoice_proof"
              :preview-src-list="[form1.invoice_proof]">
          </el-image>
        </el-form-item>
      </el-form>
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogFormVisible1 = false">取消</el-button>-->
<!--        <el-button type="primary" @click="saveData1" :loading="btnLoading1">确定</el-button>-->
<!--      </div>-->
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import downloadExcel from 'vue-json-excel'
import {excel2Json} from '@/utils/excel'
import moment from "moment";

export default {
  components: {downloadExcel},
  data() {
    return {
      exportLoadingMap: {},
      showaddLog: false,
      addLogRules: {
        reason: [
          {required: true, message: '请填写驳回理由', trigger: 'blur'},
        ],
      },
      addLogform: {
        users: [],
        date: '',
        start_date: '',
        end_date: '',
      },
      data: {total_rate: 0, channel_money: 0},
      list: null,
      total: null,
      listLoading: false,
      exportLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        start_at: '',
        end_at: '',
      },
      userLogsid: '',
      viplist: [],
      json_fields: {
        订单号: {
          field: 'order_id',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        // 自我游订单状态: {
        //   field: 'state',
        //   //自定义回调函数
        //   callback: (value) => {
        //     var state_remark;
        //     switch (value) {
        //       case '0':
        //         state_remark = '新订单'
        //         break;
        //       case '1':
        //         state_remark = '已确认'
        //         break;
        //       case '2':
        //         state_remark = '已成功'
        //         break;
        //       case '3':
        //         state_remark = '已取消'
        //         break;
        //       case '4':
        //         state_remark = '已完成'
        //         break;
        //       default:
        //         state_remark = ''
        //         break;
        //     }
        //
        //     return '<p style="mso-number-format:\'\\@\';">' + state_remark + '</p>'
        //   },
        // },
        下单时间: {
          field: 'order_date',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        渠道结算价: {
          field: 'channel_money',
          //自定义回调函数
          callback: (value) => {
            return  value
          },
        },
        渠道价实际账期金额: {
          field: 'actual_channel_money',
          //自定义回调函数
          callback: (value) => {
            return  value
          },
        },
        联系人姓名: {
          field: 'link_man',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        联系人手机: {
          field: 'link_phone',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        入住时间: {
          field: 'travel_date',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        离店时间: {
          field: 'end_travel_date',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        实际离店时间: {
          field: 'actual_end_travel_date',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        酒店名称: {
          field: 'hotel',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + (value ? value.inn_name : "") + '</p>'
          },
        },
        售卖房型名称: {
          field: 'room_type',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + (value ? value.room_type_name : "") + '</p>'
          },
        },
        房间间数: {
          field: 'room_num',
          //自定义回调函数
          callback: (value) => {
            return  value
          },
        },
        锦江订单编号: {
          field: 'room_num',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        锦江到店时间: {
          field: 'last_arr_time',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        锦江订单状态: {
          field: 'order_state',
          //自定义回调函数
          callback: (value) => {
            var state_remark;
            switch (value) {
              case 1:
                state_remark = '预订成功'
                break;
              case 2:
                state_remark = '已取消'
                break;
              case 3:
                state_remark = '预订未到'
                break;
              case 4:
                state_remark = '已入住'
                break;
              case 5:
                state_remark = '已完成'
                break;
              default:
                state_remark = ''
                break;
            }

            return '<p style="mso-number-format:\'\\@\';">' + state_remark + '</p>'
          },
        },
        锦江支付状态: {
          field: 'pay_state',
          //自定义回调函数
          callback: (value) => {
            var state_remark;
            switch (value) {
              case 0:
                state_remark = '未付款'
                break;
              case 1:
                state_remark = '已付款'
                break;
              case 2:
                state_remark = '退款处理中'
                break;
              case 3:
                state_remark = '已退款'
                break;
              default:
                state_remark = ''
                break;
            }

            return '<p style="mso-number-format:\'\\@\';">' + state_remark + '</p>'
          },
        },
        系统订单号: {
          field: 'system_order_no',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        系统订单状态: {
          field: 'system_order_status',
          //自定义回调函数
          callback: (value) => {
            var state_remark;
            switch (value) {
              case 100:
                state_remark = '下单待处理'
                break;
              case 101:
                state_remark = '下单成功'
                break;
              case 102:
                state_remark = '下单失败'
                break;
              case 201:
                state_remark = '取消订单成功'
                break;
              case 202:
                state_remark = '取消订单失败'
                break;
              default:
                state_remark = ''
                break;
            }

            return '<p style="mso-number-format:\'\\@\';">' + state_remark + '</p>'
          },
        },
        操作处理失败信息: {
          field: 'handle_error_message',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        备注: {
          field: 'remark',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        创建时间: {
          field: 'created_at',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
      },
      json_fields2: {
        用户名: {
          field: 'username',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        用户id: {
          field: 'user_id',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        奖励金额: {
          field: 'reward_value',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        备注: {
          field: 'remark',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
      },
      dateArr: null,
      getCountBtnLoading: false,
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '添加'
      },
      form: {
        id: undefined,
        pay_proofs: [],
        pay_proof: null
      },
      rules: {
        pay_proof: [{required: true, message: '支付凭证不能为空', trigger: 'blur'}],
      },
      btnLoading: false,
      dialogFormVisible1: false,
      dialogStatus1: '',
      textMap1: {
        update: '编辑',
        create: '添加'
      },
      form1: {
        id: undefined,
        invoice_proofs: [],
        invoice_proof: null
      },
      rules1: {
        invoice_proof: [{required: true, message: '发票凭证不能为空', trigger: 'blur'}],
      },
      btnLoading1: false,
    }
  },
  created() {
    this.getList()
  },
  watch: {
    showaddLog() {
      this.addLogform = {
        jin_jiang_orders: [],
        date: '',
        end_travel_date_start_at: '',
        end_travel_date_end_at: '',
      }
    },
    dateArr(newVal, oldVal) {
      if (newVal) {
        this.listQuery.start_at = newVal[0];
        this.listQuery.end_at = newVal[1];
      } else {
        this.listQuery.start_at = "";
        this.listQuery.end_at = "";
      }
    },
  },
  computed: {
    moment() {
      return moment
    },
    //状态：none：未处理 ； pending：处理中 ；completed：已完成； revoke_pending ：撤销处理中；revoked：已撤销
    status() {
      return (val) => {
        switch (val) {
          case 'none':
            return '未处理'
          case 'pending':
            return '处理中'
          case 'completed':
            return '已完成'
          case 'revoke_pending':
            return '撤销处理中'
          case 'revoked':
            return '已撤销'
        }
      }
    },
    revenue_type() {
      return (val) => {
        switch (val) {
          case 'retail_bonus':
            return '零售奖励'
          case 'referral_bonus':
            return '推荐奖励'
          case 'distribution_bonus':
            return '分销奖励'
          case 'expansion_bonus':
            return '级差奖励'
          case 'welfare_bonus':
            return '福利奖励'
          case 'founder_bonus':
            return '创始人分红'
          case 'vip_bonus':
            return 'VIP 分红'
          case 'super_vip_bonus':
            return '钻石分红'
        }
      }
    },
  },
  methods: {
    downloadDiff(row) {
      const imageUrl = row.make_up_diff_proofs[0]; // 图片地址（可远程，也可本地）
      let ext = 'xls';
      const match = imageUrl.match(/\.([a-zA-Z0-9]+)(?:\?.*)?$/);
      if (match) {
        ext = match[1];
      }
      const fileName = '补价明细.' + ext;

      fetch(imageUrl, {mode: 'cors'})
          .then(response => {
            if (!response.ok) {
              throw new Error('文件请求失败');
            }
            return response.blob();
          })
          .then(blob => {
            const downloadUrl = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = downloadUrl;
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(downloadUrl);
          })
          .catch(error => {
            console.error('下载失败:', error);
          });
    },
    geToOrderDetail(row) {
      this.$router.push(`/orderDetail?app_client_id=${row.app_client_id}&settlement_date=${row.settlement_date}&order_state=5&&system_order_status=101`);
    },
    resetForm() {
      this.form = {
        id: undefined,
        pay_proofs: [],
        pay_proof: null
      }
      this.btnLoading = false
    },

    handlePay(row) {
      this.resetForm()
      this.dialogStatus = 'create'
      this.form.id = row.id
      this.form.pay_proof =(row.pay_proofs&&row.pay_proofs.length)? row.pay_proofs[0]:null
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    saveData() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          this.form.pay_proofs = [this.form.pay_proof]
          request({
            url: '/api/backend/ledger/ledger-channel-commission-log-upload-pay-proofs',
            method: 'post',
            data: this.form
          }).then(response => {
            this.btnLoading = false
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
            this.getList();
          }).catch((err) => {
            this.btnLoading = false
          })
        }
      })
    },
    resetForm1() {
      this.form1 = {
        id: undefined,
        invoice_proofs: [],
        invoice_proof: null
      }
      this.btnLoading1 = false
    },
    downloadInvoice(row) {
      const imageUrl = row.invoice_proofs[0]; // 图片地址（可远程，也可本地）
      let ext = 'jpg';
      const match = imageUrl.match(/\.([a-zA-Z0-9]+)(?:\?.*)?$/);
      if (match) {
        ext = match[1];
      }
      const fileName = '发票.' + ext;

      fetch(imageUrl, { mode: 'cors' })
          .then(response => {
            if (!response.ok) {
              throw new Error('图片请求失败');
            }
            return response.blob();
          })
          .then(blob => {
            const downloadUrl = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = downloadUrl;
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(downloadUrl);
          })
          .catch(error => {
            console.error('下载失败:', error);
          });
    },
    handleInvoice(row) {
      this.resetForm1()
      this.dialogStatus1 = 'create'
      this.form1.id = row.id
      this.form1.invoice_proof =(row.invoice_proofs&&row.invoice_proofs.length)? row.invoice_proofs[0]:null
      this.dialogFormVisible1 = true
      this.$nextTick(() => {
        this.$refs['form1'].clearValidate()
      })
    },
    saveData1() {
      this.$refs['form1'].validate((valid) => {
        if (valid) {
          this.btnLoading1 = true
          this.form1.invoice_proofs = [this.form1.invoice_proof]
          request({
            url: '/api/backend/ledger/ledger-log-details-invoice-proofs',
            method: 'post',
            data: this.form1
          }).then(response => {
            this.btnLoading1 = false
            this.dialogFormVisible1 = false
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
            this.getList();
          }).catch((err) => {
            this.btnLoading1 = false
          })
        }
      })
    },
    tableRowClassName({row}) {
      if ((row.confirm_expire_at && new Date(row.confirm_expire_at) < new Date()) && row.confirm_status === 0) {
        return 'row-red';
      }

      if (row.pay_status !== 1 && (row.pay_expire_at && new Date(row.pay_expire_at) < new Date())
          && (row.pay_delayed_expire_at && new Date(row.pay_delayed_expire_at) < new Date())
      ) {
        return 'row-yellow';
      }

      return '';
    },

    addLog() {
      this.showaddLog = true
    },
    downloadExcel() {
      let a = document.createElement('a')
      a.href = '/订单对账模板.xlsx'
      a.download = '订单对账模板.xlsx'
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      a.remove()
    },
    postaddLog() {
      if (!this.addLogform.settlement_date) {
        this.$message.warning('请选择台账账期')
        return
      }
      return request({
        url: '/api/backend/ledger/create-log',
        method: 'POST',
        data: this.addLogform,
      })
          .then((res) => {
            if (res.code == 0) {
              this.$message({
                type: 'success',
                message: '操作成功',
              })
              this.showaddLog = false
              this.getList()
            }
          })
          .finally((val) => {
            console.log(val)
          })
    },
    handleImportUsers(file) {
      this.addLogform.users = []
      file = file.raw
      if (
          !(file.name.split('.')[1] == 'xlsx' || file.name.split('.')[1] == 'xls')
      ) {
        this.$message.error('上传文件格式不正确，请检查选择的文件')
        return
      }
      excel2Json(file, 1).then((excelData) => {
        console.log(excelData)
        // 处理业务
        if (excelData.length <= 0) {
          this.$message.error('数据不能为空')
          return
        }
        excelData.forEach((element, index) => {
          if (element['锦江订单号']) {
            this.addLogform.jin_jiang_orders.push({
              order_code: element['锦江订单号'],
              total_rate: element['锦江支付总价'],
            })
          }
          console.log(element, '--------', index)
        })
        this.importDataDialogVisible = true
        console.log(this.addLogform.jin_jiang_orders, '=============')
      })
    },
    changedata(val) {
      console.log(val)
      if (val) {
        this.listQuery.start_at = val[0]
        this.listQuery.end_at = val[1]
      } else {
        this.listQuery.start_at = ''
        this.listQuery.end_at = ''
      }
    },
    changeaddLogformdata(val) {
      console.log(val)
      if (val) {
        this.addLogform.end_travel_date_start_at = val[0]
        this.addLogform.end_travel_date_end_at = val[1]
      } else {
        this.addLogform.end_travel_date_start_at = ''
        this.addLogform.end_travel_date_end_at = ''
      }
    },
    handleExport(row) {
      var listQuery = {

      }
      listQuery.actual_end_travel_date_start_at = moment(row.settlement_date).startOf('month').format('YYYY-MM-DD');
      listQuery.actual_end_travel_date_end_at = moment(row.settlement_date).endOf('month').format('YYYY-MM-DD');
      listQuery.order_state_arr =[Number(5) ]
      listQuery.system_order_status_arr =[Number(101)]

      if (listQuery.order_state_arr) {
        listQuery.order_state = listQuery.order_state_arr.join(',')
      }

      if (listQuery.system_order_status_arr) {
        listQuery.system_order_status = listQuery.system_order_status_arr.join(',')
      }

      if (listQuery.pay_state_arr) {
        listQuery.pay_state = listQuery.pay_state_arr.join(',')
      }
      this.$set(this.exportLoadingMap, row.id, true);

      listQuery.limit = 9999999999
      return request({
        url: '/api/appClientend/order/orderList',
        method: 'get',
        params: listQuery,
      })
          .then((response) => {
            return response.data.items
          })
          .finally(() => {
            this.$set(this.exportLoadingMap, row.id, false);
          })
    },
    handleExport2() {
      this.exportLoading = true
      return request({
        url: '/api/backend/globalReward/userLogs',
        method: 'get',
        params: {
          id: this.userLogsid,
        },
      })
          .then((response) => {
            console.log(response)
            return response.data.data
          })
          .finally((val) => {
            console.log(val)
            this.exportLoading = false
          })
    },
    getList() {
      this.listLoading = true
      request({
        url: '/api/appClientend/ledger/ledger-log-details',
        method: 'get',
        params: this.listQuery,
      }).then((response) => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    getCount() {
      if (this.addLogform.settlement_date == null) {
        return
      }
      this.getCountBtnLoading = false
      request({
        url: '/api/backend/ledger/getCount',
        method: 'get',
        params: {
          settlement_date: this.addLogform.settlement_date,
        },
      }).then((response) => {
        this.data = response.data

      }).finally(() => function () {
        this.getCountBtnLoading = false
      });
    },
    confirmPay(row) {
      this.$confirm('是否确认付款？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            request({
              url: '/api/backend/ledger/ledger-channel-commission-log-confirm-pay',
              method: 'post',
              data: {
                id: row.id,
              },
            }).then((res) => {
              console.log(res)
              if (res.code == 0) {
                this.$message({
                  type: 'success',
                  message: '操作成功',
                })
                this.getList()
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            })
          })
    },
    confirm(row) {
      this.$confirm('是否确认对账？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            request({
              url: '/api/appClientend/ledger/confirm-ledger',
              method: 'post',
              data: {
                id: row.id,
              },
            }).then((res) => {
              console.log(res)
              if (res.code == 0) {
                this.$message({
                  type: 'success',
                  message: '操作成功',
                })
                this.getList()
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            })
          })
    },
    revoke(row) {
      this.$confirm('是否确认撤销？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            request({
              url: '/api/backend/globalReward/revoke',
              method: 'post',
              data: {
                id: row.id,
              },
            }).then((res) => {
              console.log(res)
              if (res.code == 0) {
                this.$message({
                  type: 'success',
                  message: '操作成功',
                })
                this.getList()
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            })
          })
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 6px;
}

::v-deep .row-red {
  background-color: #ffecec !important;
}

::v-deep .row-blue {
  background-color: #e0f0ff !important;
}

::v-deep .row-yellow {
  background-color: #fffbe0 !important;
}
::v-deep .el-date-editor .el-range-separator{
  width: 8%;
}
</style>
